<template>
    <div class="contrast-table-container">
        <nav-bar title="考试试卷分析"></nav-bar>
        <div class="contrast-table-content" v-show="!loading">
            <table class="table">
                <tr>
                    <td class="col-4">课程</td>
                    <td class="col-8">{{examInfo.examName}}</td>
                    <td class="col-4">专业年级</td>
                    <td class="col-8">{{examInfo.levelName}}</td>
                </tr>
                <tr>
                    <td class="col-4">考试时间</td>
                    <td class="col-8">{{examInfo.startTime}}</td>
                    <td class="col-4">交卷时间</td>
                    <td class="col-8">{{examInfo.submitTime}}</td>
                </tr>

                <tr>
                    <td class="col-4">考试时长</td>
                    <td class="col-8">{{examInfo.timeLimit/60}}分钟</td>
                    <td class="col-4">用时</td>
                    <td class="col-8">{{(examInfo.timeUse/60).toFixed(2)}}分钟</td>
                </tr>
                <tr>
                    <td class="col-4">卷面总分</td>
                    <td class="col-8">{{examInfo.totalScore}}</td>
                    <td class="col-4">参考人数</td>
                    <td class="col-8">{{examInfo.studentNums}}</td>
                </tr>
                <tr>
                    <td class="col-4">最高分</td>
                    <td class="col-8">{{examInfo.highestScore}}</td>
                    <td class="col-4">最低分</td>
                    <td class="col-8">{{examInfo.lowestScore}}</td>
                </tr>
                <tr>
                    <td class="col-4">平均分</td>
                    <td class="col-8">{{examInfo.avgScore}}</td>
                    <td class="col-4">排位百分比</td>
                    <td class="col-8">{{examInfo.rankingPercentage}}</td>
                </tr>
                <tr>
                    <td class="col-4">个人得分</td>
                    <td class="col-8">{{examInfo.studentScore}}</td>
                    <td class="col-4">分数名次</td>
                    <td class="col-8">{{examInfo.ranking}}</td>
                </tr>
            </table>
            <div class="title">题型难度分析</div>
            <div class="table-content">
                <table>
                    <tr>
                        <td>
                            <div class="td" style="width:80px">难度</div>
                        </td>
                        <td>满分</td>
                        <td>得分</td>
                        <td>得分率</td>
                    </tr>
                    <tr v-for="(item,index) in examInfo.questionDifficultyScoreRates" :key="index">
                        <td>
                            <div class="td" style="width:80px">{{item.difficultyName}}</div>
                        </td>
                        <td>{{item.totalScore}}</td>
                        <td>{{item.answerScore}}</td>
                        <td>{{ Math.floor(item.scoreRate * 10000) / 100}}%</td>
                    </tr>
                </table>
            </div>
            <div class="title">主题词得分分析</div>
            <div class="table-content">
                <table>
                    <tr>
                        <td>
                            <div class="td" style="width:80px">一级主题词</div>
                        </td>
                        <td>满分</td>
                        <td>得分</td>
                        <td>得分率</td>
                    </tr>
                    <tr v-for="(item,index) in examInfo.questionSubjectScoreRates" :key="index">
                        <td>
                            <div class="td" style="width:80px">{{item.topSubject}}</div>
                        </td>
                        <td>{{item.totalScore}}</td>
                        <td>{{item.answerScore}}</td>
                        <td>{{ Math.floor(item.scoreRate * 10000) / 100}}%</td>
                    </tr>
                </table>
            </div>
            <div class="title">知识分类得分分析</div>
            <div class="table-content">
                <table>
                    <tr>
                        <td>
                            <div class="td" style="width:80px">题型</div>
                        </td>
                        <td>满分</td>
                        <td>得分</td>
                        <td>得分率</td>
                    </tr>
                    <tr v-for="(item,index) in examInfo.questionTypeScoreRates" :key="index">
                        <td>
                            <div class="td" style="width:80px">{{item.questionType}}</div>
                        </td>
                        <td>{{item.totalScore}}</td>
                        <td>{{item.answerScore}}</td>
                        <td>{{ Math.floor(item.scoreRate * 10000) / 100}}%</td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: "contrast-table",
    components: {},

    data() {
        return {
            loading: true,
            examInfo: {
                questionDifficultyScoreRates: [],
                questionSubjectScoreRates: [],
                questionTypeScoreRates: [],
            },
        };
    },
    mounted() {
        this.getData();
    },
    methods: {
        getData() {
            if (this.$route.query.type == 1) {
                this.$APIs
                    .getExamAnalysis({
                        examId: this.$route.query.examId,
                    })
                    .then(data => {
                        this.examInfo = data;
                        this.loading = false;
                    });
            } else {
                this.$APIs
                    .getTrainAnalysis({
                        examId: this.$route.query.examId,
                    })
                    .then(data => {
                        this.examInfo = data;
                        this.loading = false;
                    });
            }
        },
    },
};
</script>

<style lang="scss">
.contrast-table-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    .contrast-table-content {
        flex: 1;
        overflow-y: scroll;
        padding: 15px;
    }
    td {
        border: 1px solid #2d2c3c;
        text-align: center;
        font-size: 12px;
        padding: 7px 0;
    }
    tr:nth-child(odd) {
        color: #fff;

        background: rgba(86, 186, 202, 0.05);
    }
    tr:nth-child(even) {
        color: #fff;
    }
    table {
        border-collapse: collapse;
        width: 100%;
        text-align: center;
    }
    .table {
        tr:nth-child(odd) {
            color: #56baca;

            background: rgba(86, 186, 202, 0.05);
        }
        tr:nth-child(even) {
            color: #fff;
        }
    }
    .title {
        border-right: 1px solid #2d2c3c;
        border-left: 1px solid #2d2c3c;
        padding: 7px 0;
        font-size: 12px;
        text-align: center;
    }
    .table-content {
        overflow-x: scroll;
        td {
            width: 100px;
        }
    }
}
</style>
